<template>
    <el-dialog
            :visible.sync="dialogVisible"
            width="900px"
            :before-close="closeDialog"
            append-to-body
            title="流程JSON预览"
    >
        <el-tabs v-model="activeName" type="card" activate-name="JSON">
            <el-tab-pane label="JSON" name="JSON">
                <el-input type="textarea" style="width:850px" rows="25"  v-model="jsonContent"></el-input>
            </el-tab-pane>
            <el-tab-pane label="XML" name="XML">
                <el-input type="textarea" style="width:850px" rows="25"  v-model="xmlContent"></el-input>
            </el-tab-pane>
        </el-tabs>
       
    </el-dialog>
</template>

<script>

    import {getProcessJsonByProcessId} from '@/api/workflowProcess'
    export default {
        data(){
            return {
                labelPosition:'right',
                dialogVisible: false,
                loading: false,
                jsonContent:"",
                xmlContent:"",
                processId:"",
                activeName:"JSON"
            }
        },
        created(){

        },
        methods:{
            async showDialog(row){
                this.dialogVisible = true;
                this.processId = row.processId;
                try{
                    this.loading = true
                    let res = await getProcessJsonByProcessId({processId:this.processId});
                    if(res.status == '200'){
                        let json = res.data.jsonContent;
                        let xml = res.data.xmlContent;
                        var jsonObj = JSON.parse(json)
                        this.jsonContent = JSON.stringify(jsonObj, null, 4)  
                        this.xmlContent = xml;
                    }else{
                        this.$message.error(res.msg)
                        this.loading = false
                    }
                }catch{
                    this.loading = false
                }
            }
            },
            closeDialog(){
                this.dialogVisible = false
                this.loading = false
            },

            async submit(){
               
            }
    }
</script>
<style lang="scss" scoped>
    .btn-group{
        display: flex;
        justify-content: right;
        .el-button{
            width: 50px;
        }
    }
    .el-form-item{
        height: 40px;
    }
</style>